<template>
  <div>
       <!-- 1.0 头部导航结构 -->
    <van-nav-bar
      title="我的跟帖"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
     <template #right>
        <van-icon
          name="wap-home-o"
          color="#f00"
          size="6vw"
        />
      </template>
    </van-nav-bar>
  <!-- 2.0评论列表 -->
  <div class="list">
      <div class="item" v-for="item in Comment" :key="item.id">
          <p class="date">{{item.create_date |filters}}</p>
          <div class="parent"
          v-if="item.parent"
          >
                <p class="parent_username">回复：{{ item.parent.user.nickname }}</p>
          <p class="parent_comment">{{ item.parent.content }}</p>
          </div>
          <p class="comment">{{item.content}}</p>
          <p class="article">  <router-link
            class="article_link"
            :to="`/article/${item.post.id}`"
          >原文：{{ item.post.title }}</router-link></p>
      </div>
  </div>
  <!-- 3.0空列表提示 -->
    <van-empty  v-if="Comment.length===0" description="没有评论，去贴吧逛逛" />
  </div>
</template>

<script>
import {getUserCommentAPI} from '../apis/user'
export default {
    data () {
        return {
            Comment:[]
        }
    },
async created () {
    const res = await getUserCommentAPI()
    console.log(res);
    this.Comment=res.data.data
}
}
</script>

<style lang="less" scoped>
.list{
    .item{
        padding: 15px;
        // margin-top: 10px;
        border-bottom: 1px solid #ddd;
        p{
            margin: 10px 0;
        }
    }
    .date{
        color: #666;
        font-size: 13px;
    }.comment{
        font-size: 14px;
    }
    .article{
        font-size: 14px;
        color: #999;
         .article_link {
      color: inherit;
      width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    }
     .parent {
    background-color: #e4e4e4;
    color: #666;
    font-size: 12px;
    padding: 5px;
  }
}
</style>